/*
 * pay index
**/
<template>
<div class="mod-items" id="paybox">
	<div class="weui-panel">
        <div class="weui-media-box weui-media-box_small-appmsg">
            <a class="weui-cell">
                <div class="weui-cell__hd"><i class="i-adr"></i></div>
                <div class="weui-cell__bd p-title"><p>配送地址</p></div>
            </a>
            <a class="weui-cell weui-cell_access">
                <div class="weui-cell__bd p-desc" v-show="!addinfo.address_id" @click="addrs"><p>添加地址</p></div>
				<div class="weui-cell__bd p-desc" v-show="addinfo.address_id" @click="toaddlist">
					<p>{{addinfo.consignee}} {{addinfo.mobile}}</p>
					<p>{{addinfo.province_name}} {{addinfo.city_name}} {{addinfo.district_name}} {{addinfo.address}}</p>
				</div>
                <span class="weui-cell__ft"></span>
            </a>
        </div>
    </div>
    <div class="weui-panel">
        <div class="weui-media-box weui-media-box_small-appmsg">
            <a class="weui-cell">
                <div class="weui-cell__hd"><i class="i-time"></i></div>
                <div class="weui-cell__bd p-title"><p>发货时间</p></div>
            </a>
            <a class="weui-cell">
                <div class="weui-cell__bd p-desc"><p>72小时内发货。</p></div>
                <span class="weui-cell__ft"></span>
            </a>
        </div>
    </div>
    <div class="weui-panel">
        <div class="weui-media-box weui-media-box_small-appmsg">
            <a class="weui-cell">
                <div class="weui-cell__hd"><i class="i-warn"></i></div>
                <div class="weui-cell__bd p-sub-title"><p>注意事项</p></div>
            </a>
            <div class="p-sub-desc">
	            <p>1.该商品不支持退换货</p>
	            <p>2.支付成功后，只提供快递单号</p>
	            <p>3.72小时内未发货，该平台自动退款到您微信支付。</p>
	            <p>4.产品不支持开发票</p>
            </div>
        </div>
    </div>
    <div class="footer">
    	<p class="prize-box"><span>合计金额：</span><span class="prize">{{orderInfo.price}}元</span></p>
    	<a href="javascript:;" class="weui-btn weui-btn_primary" @click="pay">微信支付</a>
    </div>
    <div class="page msg_success js_show" v-show="sucess">
	    <div class="weui-msg">
	        <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
	        <div class="weui-msg__text-area">
	            <h2 class="weui-msg__title">支付订单成功</h2>
	            <!--<p class="weui-msg__desc">内容详情，可根据实际需要安排，如果换行则不超过规定长度，居中展现<a href="javascript:void(0);">文字链接</a></p>-->
	        </div>
	        <div class="weui-msg__opr-area">
	            <p class="weui-btn-area">
	                <a @click="goOn" class="weui-btn weui-btn_primary">继续购物</a>
	                <router-link class="weui-btn weui-btn_default" to="/olist">跳转到订单详情</router-link>
	            </p>
	        </div>
	        <div class="weui-msg__extra-area">
	            <div class="weui-footer">
	                <p class="weui-footer__text">Copyright © 2016-2018 wz</p>
	            </div>
	        </div>
	    </div>
	</div>
    <adds v-if="addShow" @refreshAdd="refreshAdd"></adds>
    <addresslist v-show="addrsShow" ref="addres" @refreshAdd="refreshAdd"></addresslist>
</div>
</template>
<script>
import {getAddress, wxPayOrder} from 'src/service/getData'
import adds from 'src/page/pay/add'
import addresslist from 'src/page/pay/address'
export default {
  data () {
    return {
      addShow: false,
      addrsShow: false,
      orderInfo: {},
      addList: [],
      addinfo: {}, // 默认地址
      sucess: false, // 支付成功
      payBtnLock: false
    }
  },
  components: {
    adds,
    addresslist
  },
  mounted () {
    // 控制返回 并重置新路由
    let that = this
    window.history.pushState({}, '', '#/coupon')
    window.addEventListener('popstate', e => {
      that.$emit('back', '')
    }, false)
  },
  methods: {
    initData (param) {
      if (!localStorage.addId) localStorage.addId = 0
      this.orderInfo = param
      this.getAddlist()
    },
    addrs () {
      this.addShow = true
    },
    async getAddlist () {
      let addinfo = await getAddress()
      if (addinfo.code !== 0) return
      if (addinfo.data.total === 0) return
      this.addList = addinfo.data.list
      if (this.addList.length - 1 < localStorage.addId) localStorage.addId = 0
      this.addinfo = addinfo.data.list[localStorage.addId]
    },
    refreshAdd (param) {
      this.addShow = false
      this.addrsShow = false
      if (param && param.mobile) {
        localStorage.addId = this.addList.length  // 添加的更新默认下标
      }
      this.getAddlist()
    },
    toaddlist () {
      this.addrsShow = true
      console.log(this.$refs)
      this.$refs.addres.initData(this.addList)
    },
    async pay () {
      let that = this
      if (!(this.addinfo && this.addinfo.address_id)) {
        alert('请选择收货地址')
      }
      if (this.payBtnLock) return
      this.payBtnLock = true
      let res = await wxPayOrder(this.addinfo.address_id, this.orderInfo)
      if (parseInt(res.code) === 100012) {
        location.href = res.data.redirect
        return
      } else if (res.code !== 0) {
        alert(res.msg)
        return
      }
      window.WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        JSON.parse(res.data.parameters),
        (res) => {
          that.payBtnLock = false
          switch (res.err_msg) {
            case 'get_brand_wcpay_request:cancel': alert('用户取消支付！')
              break
            case 'get_brand_wcpay_request:fail': alert('支付失败！(' + res.err_desc + ')')
              break
            case 'get_brand_wcpay_request:ok': that.sucess = true
              break
            default: alert(JSON.stringify(res))
              break
          }
        }
      )
    },
    goOn () {
      this.sucess = false
      history.back()
    }
  }
}
</script>
<style scoped>
  .i-adr,.i-time,.i-warn{width: 0.14rem;height: 0.14rem;background: url(../../assets/imgs/pay/adr.png);background-size: 100%;display:block;}
  .i-adr{width:0.12rem;height:0.16rem;margin-right:0.02rem;}
  .i-time{background-image: url(../../assets/imgs/pay/time.png);}
  .i-warn{background-image: url(../../assets/imgs/pay/warn.png);width: 0.11rem;height: 0.11rem;}
  .i-add{background-image: url(../../assets/imgs/pay/add.png);}
  .p-title{color:#ffa200;font-size: 0.13rem;padding-left: 0.08rem;}
  .p-desc{color: #333; font-size: 0.13rem;padding-left: 0.22rem;}
  .p-sub-title{color: #666; font-size: 0.12rem; padding-left: 0.05rem;}
  .p-sub-desc{color: #333; font-size: 0.12rem; padding-left: 0.22rem; line-height: 0.18rem; padding-bottom: 0.2rem;}
  .p-sub-desc p{padding-bottom:0.05rem;}
  .footer{position: absolute; width: 100%; padding: 0 0.15rem 0.1rem; bottom: 0; background: #fff; text-align: center;}
  .prize-box{color: #333; font-size: .14rem; line-height: 0.45rem;}
  .prize-box .prize{color: #ff6f6d;}
  .mod-items{margin: 0rem !important; background: #efeff4; position: fixed; top: 0; left: 0; overflow-y: auto; bottom: 0; right: 0;z-index: 999;}
  .js_show{position: absolute; top: 0; left: 0; background: #fff; right: 0; bottom: 0; z-index: 9;}
</style>
